<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			 *{
			 	padding: 0;
			 	margin: 0;
			 }
			 ul{
			 	width: 100%;
			 	height: 25%;
			 }
			 ul li{
			 	list-style: none;
			 	width: 25%;
			 	height: 100%;
			 	border: 1px solid black;
			 	float: left;
			 	/*让边框也在指定的宽度范围内*/
			 	box-sizing: border-box;
			 }
			 ul li.black{
			 	background: black;
			 }
			 #time{
			 	text-align: center;
			 	position: fixed;
			 	top: 0;
			 	left: 0;
			 	line-height: 2em;
			 	background: red;
			 	width: 100%;
			 	font-size: 6vw;
			 	color: black;
			 	background: white;
			 }
		</style>
		<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
$(function(){
	var total = 0;//计分的
	var time = 0;
	
//	设置定时器，每隔100毫秒，改一下time的值
	setInterval(function(){
		time = time+0.1;
//		保留time小数后的一位
		$("#time span").html(time.toFixed(1));
	},100)
	
//	循环四个ul，每次都随机一个li加上classblack
	for (var i=0;i<4;i++) {
//		生成随机数
		var num = Math.floor(Math.random()*4);
//		让i号ul里面的num号li添加class
		$("ul").eq(i).find('li').eq(num).addClass('black');
	}
	
//	给所有的li加单击事件
	$('ul li').live('touchstart',function(){
//		获得被点击的li的父级的ul的序号
		var index = $(this).parent().index();
//		获得当前被点击的li的class
		var c = $(this).attr('class');
		if(index==3 && c=='black'){
//			删除当前这一行ul
			$(this).parent().remove();
			total++;
//			判断是否已经到40了
			if(total==40){
//				将时间存到本地区域中
				localStorage.t = time.toFixed(1);
//				跳转到结束页面
				location.replace('end.html');
			}
		}
		
//		添加一个新的ul
//		创建新元素的字符串形式
		var new_ul = '<ul><li></li><li></li><li></li><li></li></ul>';
//		在body头部插入ul
		$('body').prepend(new_ul);
//		给新加入的第一行ul随机黑块
		var num = Math.floor(Math.random()*4);
		$("ul").first().find('li').eq(num).addClass('black');
	})
	
})
		</script>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		
		<p id="time"><span>0.0</span>秒</p>
		
	</body>
</html>



















